<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				background-color: royalblue;
			}
			
			img {
				float: left;
			}
			
			div {
				overflow: hidden;
			}
			
			.yincang {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div>
				<img id="img1" src="img/left1.jpg" /><img id="img2" class="yincang" onmouseover="fun1()" src="img/left2.jpg" /><img id="img3" onmouseover="fun2()" src="img/right1.jpg" /><img id="img4" src="img/right2.jpg" class="yincang" />
			</div>

			<div>
				<img id="img5" src="img/end1.jpg" /><img id="img6" src="img/end2.jpg" class="yincang" />

			</div>

			<script type="text/javascript">
				function fun1() {
					document.getElementById("img1").style.display = "block";
					document.getElementById("img2").style.display = "none";
					document.getElementById("img3").style.display = "block";
					document.getElementById("img4").style.display = "none";
					document.getElementById("img5").style.display = "block";
					document.getElementById("img6").style.display = "none";
				}

				function fun2() {
					document.getElementById("img1").style.display = "none";
					document.getElementById("img2").style.display = "block";
					document.getElementById("img3").style.display = "none";
					document.getElementById("img4").style.display = "block";
					document.getElementById("img5").style.display = "none";
					document.getElementById("img6").style.display = "block";
				}
			</script>
		</div>
	</body>

</html>